<template>
  <div class="process-pane">
    <div
      v-for="item in result"
      :key="item.id"
      class="process-pane-item mb-4"
      :class="'deadline-' + item.submitTime"
    >
      <el-descriptions :column="2">
        <el-descriptions-item label="办理期限：">
          {{ item.deadlineDate ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item label="报送人：">
          {{ item.submitUserName ?? '' }}
        </el-descriptions-item>
        <el-descriptions-item width="290" label="报送时间：">
          {{ formatDateStr(item.submitTime, 'YYYY年MM月DD日 HH:mm:ss') }}
        </el-descriptions-item>
        <el-descriptions-item label="当前状态：">
          {{ EMatterStatus[item.status] }}
        </el-descriptions-item>
      </el-descriptions>
      <PreviewFileTable :file-list="item.audioDataList" />
      <h1 class="events_title">办理总结：</h1>
      <div class="">{{ item.completionDesc }}</div>
      <h1 class="events_title">办理情况：</h1>
      <div class="px-4">
        <Step :approveRecords="item.processInfoList" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { getFeedbackByMatterIdAndUnitId } from '@/api/mission/process'
import { formatDateStr } from '@/plugins/date'
import { EMatterStatus } from '@/components/statusShow/util'
import PreviewFileTable from './PreviewFileTable.vue'
import Step from './Step.vue'

const { matterId, unitId } = defineProps<{
  matterId?: number
  unitId?: number
}>()

const result = ref([])

async function getFeedback() {
  const { data } = await getFeedbackByMatterIdAndUnitId({
    matterId,
    unitId,
  })
  if (data.status === 200) {
    result.value = data.data
  }
}

defineExpose({ setData })

function setData(data: any) {
  result.value = data
}

onMounted(async () => {
  if (matterId && unitId) {
    await getFeedback()
  }
})

watch(
  () => unitId,
  async () => {
    if (unitId) {
      await getFeedback()
    }
  },
)
</script>

<style scoped></style>
